import React from 'react';
import ReactEcharts from 'echarts-for-react';
import jQuery from "jquery";
import Moment from "moment";
//import { Table } from 'react-bootstrap';

const globalConfig = require("../../js/globalConfig");

class Item {
    constructor(channel, name, timeStamp) {
        this.channel = channel;
        this.name = name;
        this.timeStamp = timeStamp;
    }
}

class Fault extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url: globalConfig.url + "/getCurFault",
            info: new Array(7).fill(new Item(null, null, null)),
            isMount: true,
        }
    }
    componentDidMount() {
        this.timerID = setInterval(() => {
            var this_ = this;
            if (this.state.isMount) {
                jQuery.ajax({
                    url: this_.state.url,
                    dataType: "JSON",
                    type: "POST",
                    data: {},
                    success: function (result) {
                        const newInfo = this_.state.info.slice();
                        for (var i = 0; i < result.length && i < newInfo.length; i++) {
                            newInfo[i] = new Item(result[i].channel, result[i].name, result[i].timeStamp);
                        }
                        this_.setState({
                            info: newInfo,
                        });
                    }
                });
            }
        }, 1000);
    }
    componentWillUnmount() {
        this.setState({ isMount: false });
        clearInterval(this.timerID);
    }
    render() {
        return (


            <table id="fault-table" className={this.props.className}>

                <tbody>
                    <tr><th>编号</th><th>故障设备</th><th>故障名称</th><th>故障时间</th></tr>
                    <tr>
                        <td>1</td>
                        <td>{this.state.info[0].channel}</td>
                        <td>{this.state.info[0].name}</td>
                        <td>{this.state.info[0].timeStamp}</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>{this.state.info[1].channel}</td>
                        <td>{this.state.info[1].name}</td>
                        <td>{this.state.info[1].timeStamp}</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>{this.state.info[2].channel}</td>
                        <td>{this.state.info[2].name}</td>
                        <td>{this.state.info[2].timeStamp}</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>{this.state.info[3].channel}</td>
                        <td>{this.state.info[3].name}</td>
                        <td>{this.state.info[3].timeStamp}</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>{this.state.info[4].channel}</td>
                        <td>{this.state.info[4].name}</td>
                        <td>{this.state.info[4].timeStamp}</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>{this.state.info[5].channel}</td>
                        <td>{this.state.info[5].name}</td>
                        <td>{this.state.info[5].timeStamp}</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>{this.state.info[6].channel}</td>
                        <td>{this.state.info[6].name}</td>
                        <td>{this.state.info[6].timeStamp}</td>
                    </tr>
                </tbody>

            </table>
        );
    }
}

export default Fault;